<template>
    <div class="icon-grid-container">
        <Grid :column-num="ColumnNum" class="icon-grid">
            <Grid-item v-for="item in iconList"
                        :key="item.index"
                        :icon="item.img"
                        :text="item.title"
                        class="icon-list-container"
                        >

            </Grid-item>
        </Grid>
    </div>
</template>

<script>
import Vue from "vue";
import { Grid, GridItem } from "vant";
export default {
    components:{
        Grid,
        GridItem,
    },
    props:{
        iconList:{
            type:Array,
            required:true,
        },
        ColumnNum:{
            type:Number||String,
            default:4,
        }
    }
}
</script>

<style scoped>
.icon-grid-container{
    width:100%;
    height:100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.icon-grid{
    width:96%;
    display: inline-flex;
    justify-content: center;
    align-items:center;
}
.icon-list-container{
    width:50px;
    border-top-left-radius:20px;
    height:100px;
    /* border:2px solid yellow; */
}
.icon-list-container img{
    width:1.7rem;
    height:1.7rem;
}
</style>